@charset "utf-8";
@component-namespace app-security-center {
  @b login {
    @e top {
      position: relative;
      width: var(--app-security-center-login-top-width);
      height: var(--app-security-center-login-top-height);
      @e title-wrapper {
        width: var(--app-security-center-login-title-wrapper-width);
        height: var(--app-security-center-login-title-wrapper-height);
        line-height: @height;
        margin: auto;
        font-weight: bold;
        font-size: var(--app-security-center-login-title-wrapper-font-size);
        text-align: center;
      }
    }
    @e center {
      width: var(--app-security-center-login-center-width);
      height: var(--app-security-center-login-center-height);
      margin: auto;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      @e input-wrapper {
        width: var(--app-security-center-login-center-input-wrapper-width);
        height: var(--app-security-center-login-center-input-wrapper-height);
        margin: auto;
        margin-bottom: var(--app-security-center-login-center-input-wrapper-margin-bottom);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      @e btn-wrapper {
        width: var(--app-security-center-login-center-btn-wrapper-width);
        height: var(--app-security-center-login-center-btn-wrapper-height);
        margin: auto;
        margin-bottom: var(--app-security-center-login-center-btn-wrapper-margin-bottom);
      }
      @e other-wrapper {
        width: var(--app-security-center-login-center-other-wrapper-width);
        height: var(--app-security-center-login-center-other-wrapper-height);
        margin: auto;
        margin-bottom: var(--app-security-center-login-center-other-wrapper-margin-bottom);
        font-size: var(--app-security-center-login-center-other-wrapper-font-size);
        display: flex;
        align-items: center;
        justify-content: center;
        @e auto-login {
          flex: 0 0 auto;
          width: var(--app-security-center-login-center-other-wrapper-auto-login-width);
          height: var(--app-security-center-login-center-other-wrapper-auto-login-height);
          text-align: left;
          line-height: @height;
        }
        @e forget-password {
          flex: 0 0 auto;
          width: var(--app-security-center-login-center-other-wrapper-forget-password-width);
          height: var(--app-security-center-login-center-other-wrapper-forget-password-height);
          text-align: right;
          line-height: @height;
          & a:link, a:visited {
            color: #378EF0; /*var(--color-light-blue);*/
            text-decoration: none;
          }
        }
        @e register-user {
          flex: 0 0 auto;
          width: var(--app-security-center-login-center-other-wrapper-register-user-width);
          height: var(--app-security-center-login-center-other-wrapper-register-user-height);
          text-align: right;
          line-height: @height;
          & a:link, a:visited {
            color: #378EF0; /*var(--color-light-blue);*/
            text-decoration: none;
          }
        }
      }
    }
    @e bottom {
      position: relative;
      width: var(--app-security-center-login-bottom-width);
      height: var(--app-security-center-login-bottom-height);
      @e bottom-social-account-wrapper {
        width: var(--app-security-center-login-bottom-social-account-wrapper-width);
        height: var(--app-security-center-login-bottom-social-account-wrapper-height);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}